<template>
    <div>
      <el-card class="box-card">
        <h2>重置密码</h2>
        <el-form
          :model="confirmForm"
          status-icon
          ref="confirmForm"
          label-position="left"
          label-width="70px"
          class="confirm-form"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="confirmForm.username"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input v-model="confirmForm.phone"></el-input>
          </el-form-item>
        </el-form>
  
        <div class="btnGroup">
          <el-button type="primary" @click="submitForm">身份验证</el-button>
          <el-button @click="resetForm('confirmForm')">重置</el-button>
          <el-button @click="goBack">返回</el-button>
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  import request from '../../utils/request';
  
  export default {
    data() {
      return {
        confirmForm: {
          username: "",
          phone: "", 
        },
      };
    },
    methods: {
      submitForm() {
        const confirmData = {
          username: this.confirmForm.username,
          phone: this.confirmForm.phone,
        };
        request.post('verifyUser',  confirmData).then(res => {
          console.log(res.data);
          if (res.code === "200") {
            console.log(res.data);
            this.$router.push('/reset');
            this.$message.success('身份验证成功');
          } else {
            this.$message.error('身份验证失败');
            console.log("前端输入的数据：", this.confirmForm);
          }
        }).catch(err => {
          console.log(err);
          this.$message.error('网络请求失败，请稍后再尝试');
        });
      },
  
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
  
      goBack() {
        this.$router.go(-1);
      },
    },
  };
  </script>
  
  <style scoped>
  .box-card {
    margin: auto;
    width: 400px;
    height: 350px;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
  }
  .confirm-form {
    margin: auto;
    padding: 0 20px;
  }
  .btnGroup {
    margin-top: 20px;
  }
  </style>
  